<template>
	<view class="cu-card case">
		<view class="cu-item">
			<view v-if="title" class="text-sm padding-left padding-tb text-primary">{{title}}</view>
			<slot></slot>
			<radio-group class="packageCard-radio">
				<view class="cu-form-group form-groups" v-for="(item, index) in list" :key="index" @tap="handleClick(item,item.channels.length)">
					<view class="devId">
						<view class="title">{{item.devName}}</view>
						<view>
							<radio v-if="item.channels&&item.channels.length===0" class="cyan radio" :class="radioVal===item.devId?'checked':''" :checked="radioVal===item.devId?true:false" :value="item.devId" ></radio>
							<view v-else :class="'cuIcon-' + item.icon" class="lg text-gray" ></view>
						</view>
					</view>
					<view v-if="item.icon==='unfold' && item.channels.length>0 " style="background-color: #f8f8f8;" class="radius margin-bottom">
						<view style="display: block;" class="cu-item padding-sm" v-for="(chn,chnId) in item.channels" :key="chnId" @tap.stop="channelRadioChange(item,chnId)">
							<view class="grid col-2">
								<view>
									<view class="text-gray">{{chnId+1}}{{$t('JLink.order.list.message.channel')}}</view>
								</view>
								<view class="text-right">
									<radio class="cyan radio" :class="channelRadioVal===chnId.toString()&&radioVal===item.devId?'checked':''" :checked="channelRadioVal===chnId.toString()&&radioVal===item.devId?true:false" :value="chnId.toString()"></radio>
								</view>
							</view>
						</view>
					</view>
					
				</view>
				
			</radio-group>
			
		</view>
	</view>
</template>

<script>
export default {
  components: {
  },
  props:{
    // 列表
    list:{
      type:Array,
      default:()=>{
        return []
      }
    },
    // 标题
    title:{
      type:String,
      default:''
    },
    devIdRadioValue:{
      type:[String,Number],
      default:''
    },
    chnIdRadioValue:{
      type:[String,Number],
      default:''
    }
  },
  data() {
    return {
      radioVal:'',//选择的设备
      channels:[],
      channelRadioVal:'',//选择的通道号
    }
  },
  watch:{
    devIdRadioValue(newVal, olds){
      this.radioVal = newVal;
    },
    radioVal(newVal, olds){
      this.$emit("updateDevIdRadioValue", newVal);
    },
    chnIdRadioValue(newVal, olds){
      this.channelRadioVal = newVal;
    },
    channelRadioVal(newVal, olds){
      this.$emit("updateChnIdRadioValue", newVal);
    },
  },
  onLoad(opt) {
  },
  onUnload() {

  },
  onShow() {
  },
  methods: {
    handleClick (item,len) {
      len ? this.IconChange(item) : this.deviceChange(item);
    },
    deviceChange ({devId}) {
      this.radioVal = devId;
      this.channelRadioVal = '-1';//清空通道选择
      this.list.forEach(z=>{
        if(z.devId===devId){
          z.icon = z.icon==='fold' ? 'unfold':'fold';
        }else{
          z.icon='fold';
        }
      })
      uni.setStorageSync('packageCardSelect',devId)//存储所选设备
      uni.setStorageSync('packageCardSelChannel',this.channelRadioVal)//存储所选通道
    },
    IconChange (item) {
      const {devId,channels} = item;
      this.channels = channels;
      this.$emit('IconChange',item)
    },
    channelRadioChange (item,chnId) {
      const {devId} = item;
      let channelId = chnId.toString();
      this.channelRadioVal = channelId;
      this.radioVal = devId;
      uni.setStorageSync('packageCardSelect',devId)//存储所选设备
      uni.setStorageSync('packageCardSelChannel',channelId)//存储所选通道
    }
  }
}
</script>

<style lang="less" scoped>
@import '@/common/style/main.css';
</style>
